<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性(10个属性)</title>
		<!-- 文本格式化属性(4种方式，10个属性)
		 1.控制字体：font-family、font-size、font-weight
		 2.控制文本布局【对其、间隙】：text-algin、line-hight、letter-spacing、word-spacing
		 3.文本修饰效果： text-decoration、text-shadow
		 4.处理文本效果：white-space
		 -->
		<style>
			/* CSS3语法：选择器{
							属性： 属性值；
							属性： 属性值；
							} 
							叫法：一个样式
						id选择器语法：html元素加 id="别名"
									css中加#别名选中
						提醒：加权    元素选择器  1
									id选择器     100
							*/
		div#two{
			color: red;
			/* 知识点2：文本格式化属性-->1.针对控制字体
			 font-family字体家族: 微软雅黑,sans-serif黑体！
			 问题：可以设置多个字体，浏览器会按照顺序找字体
			 兼容考虑：用户电脑字体缺失，对应找可以使用字体！
			 */
			font-family: sans-serif;
			/* 知识点2：文本格式化属性-->2.针对控制字体
			font-size字体尺寸：px/em；
			px---PC端----像素，特点：绝对值
			em移动端：----特点：相对于父元素字体大小，倍数放大
			 */
			font-size: 10px;
			/* 文本格式化属性-->3.针对控制字体
			 font-weight字体粗细程度属性    ：  100.200.300···900
			 用法：全局字体，通配选择器中使用，400和700
			 400正常粗细大小   对应  normal  正常
									bold    相对与父元素加粗
									light   相对与父元素变细
			 */
			font-weight: bold;
		}
		div #one{
			/* 知识点3：文本格式化属性--针对控制文本格式*/
			 text-align: justify;/*两端对齐：字体空间长 */
			color: red;
		}
		/* div>#one{ 
			color: red;
		 } 
		 */
		div h1#one{
		
			/* 知识点4：文本格式化属性--针对控制文本格式 */
			text-align:justify;
			/* 两端对齐:字体空间长度,使用位置;弹性布局 */
			color: red;
		}
		div span{
			border: 1px solid;
			height: 25px;
			/* 行转块 */
			display: block;
			/* 知识点5，文本格式化属性--文本对齐方式【垂直】 
			line-height：行高属性
			使用方式：一定跟高度一起出现【垂直】
			*/
		   line-height: 60px;
		   /* 知识点6：文本格式化属性-文本间隙【字符】 */
		   letter-spacing: 2px;
		   /* 知识点7：文本格式化属性--文本间隙【单词】 */
		   word-spacing: 10px;
		   /* 补充：
		   1.所有的单词大写 
		   2.所有的首字母大写
		   3.首行缩进200px text-indent: 200px;
		   */
		  text-transform: uppercase;
		  text-transform: capitalize;
		  text-indent: 200px;
		}
		a{
			/* 知识点8：文本修饰效果，针对超链接
			 使用方法：与通配选择器一起使用
			 none：去掉超链接下划线
			 underline：默认，下划线，切换
			 line-through：删除线，被html5中s元素取代
			 */
			text-decoration: line-through;
			/* 知识点9：文本修饰效果，针对超链接和文本
			 text-shadow 文本阴影属性
			 属性值：x值 y值 blur模糊距离 颜色；
			 */
			text-shadow:5px 5px 10px #f00;
			
		}
		p{
			border: 1px solid red;
			/* 知识点10：white-space换行属性 
			属性值不同 效果不同
			nowrap  效果：不换行，作用，在一行显示，不超出范围
			 使用特点：配合溢出一起使用
			pre   保留空白符
			normal  默认
			*/
		    w hite-space: pre;/*不换行，就一行 */
		   overflow: hidden; /* 其他行省略 */
		   w hite-space: nowrap;/* 保留原始文本空格和回车 */
		   white-space: normal;/* 默认，空格合并，自动换行 */
		}
		</style>
	</head>
	<body>
		<h1>处理文本效果【换行和溢出】</h1>
		<p>Lo  rem ipsum dolor sit amet consectetur adipisicing elit. Minus eveniet porro tenetur nihil provident aspernatur, esse accusamus non quas, odio, amet praesentium. Molestiae consequuntur, esse amet dignissimos reprehenderit accusantium asperiores.</p>
		
		
		
		
		
		
		
		<h1>
			<marquee>控制文本布局[对齐、间隙]</marquee>
		</h1>
		<!-- 需求：创建div，内嵌span元素，增加假文 
				  设置样式：添加1个像素实线边框，高度：25px
				  派生选择器span元素
		-->
		<div><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, libero! Praesentium a temporibus odio in saepe id consequatur veniam assumenda neque minima facere laboriosam cum, omnis reiciendis quam voluptatum quas!</span></div>
		<!-- 需求：创建a元素，超链接跳转到唐工官网 -->
		<div style="height: 200px"></div>
		<h1>文本修饰效果</h1>
		<a href="http://ehall.tsgzy.edu.cn">跳转到唐工官网</a>
		
		
		
		<div id="two">Lorem</div>
		<!-- 需求：外层div  内层h1，别俩别名，css任意别名字体设置颜色
			要求：加权方式
			-->
		<div >
			<h1 id="one" class="three">lorem</h1>
		</div>
	</body>
</html>